<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#a1{
				position: absolute;
				width: 100%;
				height: 100%;
				/* background-color: red; */
			}
			body{
				text-align: center;
			}
			#btn1{
				width: 100px;
				height: 40px;
				margin: 150px 0 0 0;
			}
			#btn2{
				width: 100px;
				height: 40px;
				margin: 150px 0 0 0;
			}
		</style>
	</head>
	<body>
		<div id="a1">
			
			<button type="button" id="btn1">开始</button>	
			<button type="button" id="btn2">结束</button>
		</div>
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var b=true;
				var sec = 0;
				var a;
				var c;
				$("#btn1").click(function(){
					var miao = (Math.random()*5)+1;
					if(b == true){
						b=null;
						c=setTimeout(function() {
							b = false;
							$("#a1").css("background-color","red");
							a = setInterval(function(){sec++},1)
						}, miao*1000);
					}
					
				});
				$("#btn2").click(function(){
					if (b == false) {
						clearInterval(a);
						sec = (sec/250).toFixed(3);
						alert("您的手速为："+sec+"秒哦~");
						$("#a1").css("background-color","white");
						sec = 0;
						b = true;
						
					}
						
					if(b == null){
						clearInterval(a);
						alert("诶呀~您点快了，人家还没变色呢~~");
						clearTimeout(c);
						sec = 0;
						b = true;
					}
				});
				
			});
			
		</script>
	</body>
</html>
